<style>
    .layui-tree-iconClick {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        height: 20px;
        line-height: 20px;
        margin: 0 10px;
        width: 10px;
        color: #c0c4cc;
    }
</style>
<div class="layui-clear" style="padding:20px 20px 90px 20px;">
    <div id="tree"></div>
    <div class="xy-bottom" style="bottom:20px;position: fixed;">
        <button class="layui-btn" lay-action="getChecked" id="save-btn">确定保存</button>
    </div>
</div>
<script>
    layui.use(['tree', 'util'], function() {
        var tree = layui.tree,
            layer = layui.layer,
            util = layui.util;
        var ii = layer.msg('Loading...', {
            icon: 16,
            time: 10000
        });
        var role_id = '{$_GET["id"] | default = 0}';
        $.get('/permission/api_admin/get_permission', function(ret) {
            if (ret.status) {
                var menu_data = [];
                for (var i = 0; i < ret.data.length; i++) {
                    var item = ret.data[i];
                    item['spread'] = true;
                    menu_data[i] = item;
                }
                tree.render({
                    id: 'menu',
                    elem: '#tree',
                    data: menu_data,
                    showLine: false,
                    showCheckbox: true
                });
                $.get('/permission/api_admin/get_role_menus/role_id/' + role_id, function(ret) {
                    layer.close(ii);
                    if (ret.status) {
                        tree.setChecked('menu', ret.data); //勾选指定节点
                    }
                });
            }
        });

        $('#save-btn').click(function() {
            var checkedData = tree.getChecked('menu'); //获取选中节点的数据
            // console.log(checkedData.length);
            var menu_ids = get_checked(checkedData, []);
            console.log(menu_ids);
            var ii = layer.msg('Loading...', {
                icon: 16,
                time: 10000
            });
            $.post('/permission/api_admin/save_permission', {
                role_id: role_id,
                menu_ids: menu_ids
            }, function(ret) {
                layer.close(ii);
                if (ret.status) {
                    layer.msg(ret.info, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        parent.think_close();
                    });
                } else {
                    layer.msg(ret.info, {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        });

        function get_checked(data, result = []) {
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                if (item['children']) {
                    result = get_checked(item['children'], result);
                } else {
                    result.push(item['id']); //只存储底层节点（就是children = []）
                }
            }
            return result;
        }
    });
</script>